<template>
  <div style="background: #eeeeee">
    <div style="width:100%;text-align: center">
      <img src="../../../assets/img/signin/login.png"/>
      <div>
        <div>
          <input v-model="email" class="input_style" placeholder="邮箱"/>
        </div>
        <div>
          <input type="password" v-model="passward" class="input_style" placeholder="请输入你的密码"/>
        </div>
        <div>
          <input v-model="nickname" class="input_style" placeholder="昵称"/>
        </div>
        <div>
          <button class="button_style" @click="signUp(email,passward,nickname)">立即注册</button>
        </div>
        <div class="text_style">
          <!--<span style="float: left">忘了密码？</span>-->
          <span style="float: right;" @click="$router.push('/signIn')">去登陆=></span>
        </div>
      </div>
    </div>
    <my-toast v-model="showToast" :toast-msg="toastMsg" :toast-time="toastTime"></my-toast>
  </div>
</template>

<script>
  import md5 from 'js-md5';
  import {SignUp} from '../../../util/requestAll/user'
    export default {
      name: "SignUp",
      data(){
        return {
          email:'',
          passward:'',
          nickname:'',
          username:'',
          phone:'',
          showToast:false,
          toastMsg:'',
          toastTime:2000
        }
      },
      methods:{
        showMyToast(toastMsg,toastTime){
          this.toastMsg=toastMsg
          this.toastTime=toastTime
          this.showToast=true
        },
        signUp(email,passward,nickname){
          if(!email||!passward){
            this.showMyToast('邮箱和密码不能为空！',2000)
            return
          }
          if(!nickname){
            nickname='王八'
          }
          SignUp({
            email:email,
            passward:md5(passward),
            nickname:nickname
          }).then(res=>{
            let resData=res.data
            if(resData.resStatus==1){
              this.showMyToast('注册成功,跳转到登录页面！',1000)
              setTimeout(()=>{
                this.$router.push("/signIn")
              },1500)
            }else{
              this.showMyToast('注册失败！',2000)
            }
          }).catch(err=>{
            this.showMyToast('注册失败！',2000)
          })
        }
      }
    }
</script>

<style scoped>
  .input_style{
    width: 273px;
    outline-style: none ;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #333333;
    border: none;
    background: #ffffff;
    padding: 15px 5px;
    font-size: 16px;
    margin-top: 1px;
  }
  .button_style{
    width: 283px;
    height: 44px;
    line-height: 44px;
    background: #146fdf;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    margin-top: 15px;
  }
  .text_style{
    width: 283px;
    color: #246183;
    margin: 15px auto;
    line-height: 14px;
    font-size: 14px;
    padding: 15px 10px;
  }
</style>
